<%@include file="../context.jsp"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stock Screener</title>
<%@include file="../common_imports.jsp"%>
<%@include file="../common_frontend_imports.jsp"%>
<!--  <link
	href="<c:url value="/resources/css/jquery-ui-1.10.4.custom.min.css " />"
	rel="stylesheet" type="text/css" /> -->

<script type="text/javascript">
	$(document).ready(function() {
		initPage();
		var colNames, colModel;
		$.ajax({
			url : "/StockScreener/priceperformence/colData",
			type : "GET",
			contentType : "application/json; charset=utf-8",
			data : {},
			dataType : "json",
			success : function(data, st) {
				if (st == "success") {
					colNames = data.colNames;//jqgrid heading data
					colModel = data.colModel; // its column model
					createGrid();
					setGrpHeader();
				}
			},
			error : function() {
				alert("Error with AJAX callback");
			}
		});
		
		function initPage() {
			$(".datepicker").datepicker({
				dateFormat : "yy-mm-dd",
				maxDate: new Date
			});
		}

		function createGrid() {
			$("#grid").jqGrid({
				url : "/StockScreener/priceperformence/list",
				datatype : "json",
				mtype : 'POST',
				height : 350,
				autowidth : true,
				viewrecords : true,
				colNames : colNames,
				colModel : colModel,
				caption : "Price Performance",
				jsonReader : {
					root : "data",
					page : "page",
					total : "total",
					records : "records"
				},
				pager : '#gridpager',
				rowNum : 10,
				rownumbers : true				
			});			  
		}

		function setGrpHeader() {
			jQuery("#grid").jqGrid('setGroupHeaders', {
				useColSpanStyle : false,
				groupHeaders : [ {
					startColumnName : 'oneWeekPricePer',
					numberOfColumns : 6,
					titleText : '<center><em>Price performence</em></center>'
				}]
			});

		}

		comapanySearch();

	});

	function comapanySearch() {
		$("#btn_search_allSearch").on("click", function() {
			console.info("search");
			searchData("filterForm_allSearch");
		});

		$("#resetFilter_allSearch").on("click", function() {
			console.info("reset filter");
			$("#filterForm_allSearch")[0].reset();
			searchData("filterForm_allSearch");
		});
		
		$("#reCalculate").on("click", function() {
			console.info("re-calculate");
			searchData("filterForm_allSearch");
		});
	}
	
	<!-- criteria section -->
	function searchData(formId) {
		console.info("Search method called " + formId);
		var queryString = $("#" + formId).serialize();
		
		var gridId = $("div:visible[id*=gbox_]").attr("id");
		var gridName = gridId.replace("gbox_", "");
		
		var firstDate = $("#datepicker").val();
		var lastDate = $("#lastDateDatepicker").val();

		if(!isEmpty(firstDate) && isEmpty(lastDate)) {
			queryString+="&firstDate=" + firstDate;
		}
		if(!isEmpty(lastDate) && isEmpty(firstDate)) {
			queryString+="&lastDate=" + lastDate;
		}
		
		if(!isEmpty(firstDate) && !isEmpty(lastDate)) {
			queryString+="&firstDate=" + firstDate +"&lastDate=" + lastDate;
		}
		
		// this is a search
		queryString+="&search=true";
		console
				.info("query string :" + queryString + ' grid name :'
						+ gridName);
		$("#" + gridName).setGridParam({
			postData : queryString
		});
		$("#" + gridName).jqGrid().trigger("reloadGrid");
	}

	function resetFilters(formId) {
		console.info("Reset method called " + formId + " " + $("#" + formId).attr("action"));
		$("#" + formId)[0].reset();	
		
		// then do a search again
		search(formId);
	}
	
</script>
</head>
<body>
	<div class="main_wrapper">
		<div class="container-fluid">
			<div class="row-fluid">
				<%@include file="../stockscreener/header.jsp"%>
			</div>
			<div class="row-fluid">
				<div class="main_menu_wrapper span12">
					<div class="navbar">
						<div class="navbar-inner">
							<div class="container">
								<button class="btn btn-navbar collapsed"
									data-target=".nav-collapse" data-toggle="collapse"
									type="button">
									<div class="icon_wrapper"
										style="float: right; padding: 5px 10px;">
										<span class="icon-bar"></span> <span class="icon-bar"></span>
										<span class="icon-bar"></span>
									</div>
								</button>

								<div class="nav-collapse collapse">
									<%@include file="../header_link.jsp"%>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<%@include file="../stockscreener/search.jsp"%>
			</div>
			<div class="table_02">
				<div class="row-fluid">
					<div class="row-fluid">
						<div>
							<span>first Date</span> <input type="text" class="datepicker"
								id="datepicker" name="datepicker" /> <span>Last Date</span> <input
								type="text" class="datepicker" id="lastDateDatepicker"
								name="datepicker" /> <input id="reCalculate" type="button"
								class="btn btn-inverse save" value="Check Price" />
						</div>
						<div id="dataTabs">
							<div class="table_body">
								<table id="grid"></table>
								<div id="gridpager"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="footer_wrapper">
				<%@include file="../footer.jsp"%>
			</div>


		</div>
	</div>


</body>
</html>
